<!-- 模板 -->
<template>
    <!-- 一定要有一个根容器 -->
  <div>
    <h2 class="title">这是home界面</h2>
    <p>{{ msg }}</p>
    <div class="test">
        <p>这是一个内容!</p>
    </div>
    <button>这是一个按钮</button>
  </div>
</template>

<!-- JS逻辑代码 -->
<script>
export default {
    data() {
        return {
            msg: 'hello Home'
        }
    }

}
</script>

<!-- 样式逻辑代码 -->
<style lang="scss" scoped>
    $highlight-color: #F90;
    .title {
        color: $highlight-color;
    }
    .test{
        p{
            color:red;
        }
    }
</style>